import React, { Fragment } from "react";
import BaseSwiper from "swiper";
import "swiper/dist/css/swiper.css";
import "./index.css";

class Swiper extends React.Component {
  render() {
    let { pagination, navigation, slide } = this.props;
    let className = `swiper-container ${this.props.className}`;
    if (slide.length > 0) {
      return (
        <div className={className} style={this.props.style}>
          <div className="swiper-wrapper">
            {slide[0].adv_list.item.map((item, index) => {
              return (
                <div key={index} className="swiper-slide">
                  <img src={item.image} alt="" />
                </div>
              );
            })}
          </div>
          {/* <!-- 如果需要分页器 --> */}
          {pagination && <div className="swiper-pagination" />}
          {/* <!-- 如果需要导航按钮 --> */}
          {navigation && (
            <Fragment>
              <div className="swiper-button-prev" />
              <div className="swiper-button-next" />
            </Fragment>
          )}
        </div>
      );
    } else {
      return null;
    }
  }

  initSwiper() {
    this.mySwiper = new BaseSwiper(".swiper-container", {
      autoplay: true,
      pagination: this.props.pagination
        ? {
            el: ".swiper-pagination"
          }
        : {},
      navigation: this.props.navigation
        ? {
            nextEl: ".swiper-button-prev",
            prevEl: ".swiper-button-next"
          }
        : {}
    });
  }
  BannerNext() {
    this.mySwiper.slideNext();
  }
  BannerPrev() {
    this.mySwiper.slidePrev();
  }
  componentDidUpdate() {
    if (this.mySwiper) {
      this.mySwiper.destroy();
    }
    this.initSwiper();
  }
}

export default Swiper;
